<template>
  <div class="page-container">
    <SearchPanel @change="handleSearchPanelChange">
      <Case></Case>
    </SearchPanel>

    <div class="table-container">
      <!-- <div class="table-tools-panel table-flex-row">
        <el-button
          class="flush-btn"
          size="mini"
          icon="el-icon-refresh"
          @click="() => handleRefresh()"
          >刷新</el-button
        >
      </div> -->
      <div class="table-list-panel">
        <el-table
          ref="table"
          v-loading="tableLoading"
          size="small"
          border
          :data="tableData"
          :height="isShow ? 'calc(100vh - 500px)' : 'calc(100vh - 435px)'"
          @selection-change="selectionChange"
        >
          <el-table-column type="selection" width="45" fixed="left" />
          <el-table-column
            prop="overFlag"
            label="超时"
            show-overflow-tooltip
            width="70"
          >
            <template slot-scope="scope">
              <div class="overFlagBox">
                <img
                  src="@/assets/images/images1/icon1.png"
                  alt=""
                  v-if="scope.row.overFlag == '已超期'"
                />
                <img
                  src="@/assets/images/images1/icon3.png"
                  alt=""
                  v-if="scope.row.overFlag == '未超期'"
                />
                <img
                  src="@/assets/images/images1/icon2.png"
                  alt=""
                  v-if="scope.row.overFlag == '即将超期'"
                />
                {{ scope.row.overFlag }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="code"
            label="案件编号"
            show-overflow-tooltip
            width="150"
          />
          <el-table-column
            prop="superviseFlag"
            label="督办"
            show-overflow-tooltip
            width="70"
          >
            <template slot-scope="scope">
              <div class="supervise" @click="superviseList(scope.row.code)">
                <span v-if="scope.row.superviseFlag != null"
                  >督办 {{ scope.row.superviseFlag }} 次</span
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="sourceName"
            label="案件来源"
            show-overflow-tooltip
            width="100"
          />
          <el-table-column prop="labels" label="标签集" show-overflow-tooltip />
          <el-table-column
            prop="nodeNowName"
            label="当前办理环节"
            show-overflow-tooltip
          />
          <el-table-column
            prop="nodeNowDept"
            label="当前办理单位"
            show-overflow-tooltip
          />

          <el-table-column
            prop="reportTime"
            label="上报时间"
            show-overflow-tooltip
            sortable
            width="130"
          >
            <template slot-scope="scope">
              <div>
                {{ parseTime(scope.row.reportTime) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="categoryCompleteName"
            label="权责清单全称"
            show-overflow-tooltip
          />
          <el-table-column
            prop="categoryName"
            label="权责清单"
            show-overflow-tooltip
          />

          <el-table-column
            prop="addressDetailedUser"
            label="地址"
            show-overflow-tooltip
          />
          <!-- <el-table-column
            prop="nodeNowDept"
            label="街道"
            show-overflow-tooltip
          /> -->
          <el-table-column label="操作" width="90" fixed="right">
            <template slot-scope="scope">
              <el-button
                class="table-inner-btn"
                type="text"
                size="mini"
                @click.native="handleDetail(scope.row)"
                >详情</el-button
              >
              <el-button
                class="table-inner-btn"
                :disabled="scope.row.currentStatus >= 8"
                type="text"
                size="mini"
                @click.native="handleUpdate(scope.row)"
                >流程</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-panel">
          <Pagination
            :total="query.total"
            :page.sync="query.pageNum"
            :limit.sync="query.pageSize"
            @pagination="getQueryAllListData"
          />
        </div>
      </div>
    </div>

    <!-- 弹窗框 -->
    <TaskHistoryDialog
      custom-class="custom-dialog"
      @closeDialog="dispatchDialogVisible = false"
      :dialogVisible="dispatchDialogVisible"
      :case-code="caseCode"
    />

    <!-- 督办弹窗框 -->
    <SuperviseListDialog
      custom-class="custom-dialog"
      @closeDialog="SuperviseListDialog = false"
      :dialogVisible="SuperviseListDialog"
      :case-code="caseCode"
    />
  </div>
</template>

<script>
import SearchPanel from "@/components/SearchPanel";
import Pagination from "@/components/Pagination";
import { parseTime } from "@/utils/index";
import Case from "@/components/case";
import SuperviseListDialog from "@/views/casedeal/components/superviseListDialog";
import TaskHistoryDialog from "@/views/casedeal/components/taskHistoryDialog";
import { categoryType, industryArea, region, caseMessage } from "@/api/case.js";
import { getList } from "@/api/law/apelist";
export default {
  name: "CaseDealList",
  components: {
    Pagination,
    SearchPanel,
    TaskHistoryDialog,
    SuperviseListDialog,
    Case,
  },
  data() {
    return {
      dispatchDialogVisible: false,
      SuperviseListDialog: false,
      obj: null,
      dialogType: "add",
      tableLoading: false,
      SourceTypeArr: [], // 来源
      IndustryAreaArr: [], //行业领域所有
      TitleOfPowerArr: [], //权力名称下拉框
      ChecklistArr: [], //事项清单下拉框

      query: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
        sourceCode: "",
        reportTime: null,
        caseCode: "",
        categoryDcaCode: "",
        categorySupCode: "",
        categorySubCode: "",
      },
      tableData: [],
      caseCode: "",
      isShow: true,
    };
  },
  created() {
    this.initData();
    // 调用行业领域的接口
    this.getIndustryArea();

    // 调用获取来源类型的接口
    this.getSourceMessage();

    this.$bus.on("formDatas", (data) => {
      let address = location.href.substr(
        location.href.indexOf("#") + 1,
        location.href.length
      );
      if (data.address == address) {
        this.tableLoading = true;
        getList({
          addressCityCode: data.addressCity,
          addressCommunityCode: data.addressDetailedUser,
          addressStreetCode: data.addressStreet,
          categoryDcaCode: data.industry,
          categorySupCode: data.majorCategories,
          categorySubCode: data.subclass,
          code: data.caseCode,
          startTime: data.startTime,
          endTime: data.endTime,
          sourceCode: data.sourceCode,
          total: this.query.total,
          pageNum: this.query.pageNum,
          pageSize: this.query.pageSize,
          categoryCode: data.categoryCode,
          label: data.label,
        })
          .then((result) => {
            let { rows, code, total } = result;
            let obj = {};
            if (code == 200) {
              this.tableData = rows;
              // 计算超时
              this.tableData.forEach((item) => {
                if (item.overFlag == 0) {
                  item.overFlag = "未超期";
                } else if (item.overFlag == 1) {
                  item.overFlag = "已超期";
                } else {
                  let time = Date.parse(new Date()) / 1000;
                  if (time > item.planCompletionTime) {
                    item.overFlag = "已超期";
                  } else if (time * 0.8 > item.planCompletionTime) {
                    item.overFlag = "即将超期";
                  } else {
                    item.overFlag = "未超期";
                  }
                }
              });
              this.query.total = total;
            }
            this.tableLoading = false;
          })
          .catch(() => {
            this.tableLoading = false;
          });
      }
    });
  },
  methods: {
    parseTime,
    selectionChange(selection) {},
    handleSearchPanelChange(flag) {
      this.isShow = flag;
    },

    // 督办列表
    superviseList(val) {
      this.SuperviseListDialog = true;
      this.$bus.emit("getsuperviseList", val);
    },

    // 查询所有列表信息
    getQueryAllListData() {
      this.tableLoading = true;
      if (this.query.reportTime != null) {
        this.query.startTime = this.query.reportTime[0];
        this.query.endTime = this.query.reportTime[1];
      }
      const query = JSON.parse(JSON.stringify(this.query));
      getList(query)
        .then((result) => {
          let { rows, code, total } = result;
          let obj = {};
          if (code == 200) {
            this.tableData = rows;
            // 计算超时
            this.tableData.forEach((item) => {
              if (item.overFlag == 0) {
                item.overFlag = "未超期";
              } else if (item.overFlag == 1) {
                item.overFlag = "已超期";
              } else {
                //  item.overFlag="111"
                let time = Date.parse(new Date()) / 1000;
                if (time > item.planCompletionTime) {
                  item.overFlag = "已超期";
                } else if (time * 0.8 > item.planCompletionTime) {
                  item.overFlag = "即将超期";
                } else {
                  item.overFlag = "未超期";
                }
              }
            });
            this.query.total = total;
          }
          this.tableLoading = false;
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },

    // 获取行业领域
    getIndustryArea() {
      industryArea({ parentId: 0 })
        .then((result) => {
          let { rows } = result;
          this.IndustryAreaArr = rows;
        })
        .catch({});
    },

    // 获取来源类型
    getSourceMessage() {
      categoryType({
        sysGroup: "caseSource",
      })
        .then((result) => {
          let { rows } = result;
          this.SourceTypeArr = rows;
        })
        .catch({});
    },

    // 行业领域的change事件
    industryChange(val) {
      industryArea({ parentId: val })
        .then((res) => {
          this.TitleOfPowerArr = res.rows;
        })
        .catch(() => {});
    },

    // 权力名称的change事件
    powerChange(val) {
      industryArea({ parentId: val })
        .then((res) => {
          this.ChecklistArr = res.rows;
        })
        .catch(() => {});
    },

    // 刷新
    handleRefresh() {
      this.clearQuery();
      this.getQueryAllListData();
    },
    // 流程
    handleUpdate(row) {
      this.caseCode = row.code;
      this.dispatchDialogVisible = true;
    },
    initData() {
      this.getQueryAllListData();
    },
    handleDetail(row) {
      sessionStorage.setItem("flushBackUrl", "/caseDetail/caseDetail");
      this.$router.push({
        name: "CaseDetail",
        params: {
          caseCode: row.code,
          dialogType: "detail",
          buttonDisable: false,
        },
      });
    },

    // 顶部查询按钮
    handleQuery() {
      this.getQueryAllListData();
    },
    clearQuery() {
      this.query = {
        total: 0,
        pageNum: 1,
        pageSize: 10,
        sourceCode: "",
        reportTime: [],
        caseCode: "",
        categoryDcaCode: "",
        categorySupCode: "",
        categorySubCode: "",
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.overFlagBox {
  display: flex;
  justify-content: center;
  align-items: center;
}
.supervise {
  cursor: pointer;
}
.overFlagBox img {
  width: 16px;
  height: 16px;
  margin-right: 5px;
}
// ele_时间框长度 100%
.el-date-editor--datetimerange.el-input,
.el-date-editor--datetimerange.el-input__inner {
  width: 100%;
}

/deep/ .pagination-container {
  padding: 0 16px;
  margin-top: 10px;
}
</style>
